<!DOCTYPE html>
<html>
    <head>
		<title>考勤记录</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>	
		<script src="js/radialIndicator.js"></script> 
		<style>
			.nav-tabs{margin-top: 50px;}
			.title_top{text-align: center;}
			.nav-tabs .col-xs-4{padding: 0;	}
			select {
				border: none;
				appearance:none;
				-moz-appearance:none;
				-webkit-appearance:none;
				background:none;
				color:#0060CA;
				padding-right: 10px;
			}
			.rq{padding: 0;}
			.rq a{color: #FFF;}
			.nodata{margin:0 auto;text-align:center;padding-top:50%;}
			.nodata img{width:50%;height:50%;}
		</style>
    </head>
		<body class="">
			<div class="col-xs-12 title_top">
				<div class="col-xs-3 rq back">
					<a href="javascript:history.back(-1)">
						<div style="float: left;"><img src="images/icon_left.png"/></div>
						<div style="float: left;margin-top: 2px;">返回</div>
					</a>
				</div>
				<div class="col-xs-6">考勤记录</div>
				<div class="col-xs-3"></div>
			</div>
			<div id="myTabContent" class="col-xs-12 tab-content">
				<div class="col-xs-12 content_1">
					<div class="col-xs-9 left builders">
						某某某施工单位
					</div>
					<div class="col-xs-3 right">
							<select>
								<option>全部</option>
							</select>
						<div class="down-arrow"></div>
					</div>
					<div class="col-xs-12 list" >
						<div class="col-xs-2 title left">姓名</div>
						<div class="col-xs-2 title">性别</div>
						<div class="col-xs-6 title">日期</div>
						<div class="col-xs-2 title right">打卡方式</div>
					</div>
					<div class="pounchtime_lists" id="refreshContainer">
					
					</div>
				</div>
			</div>
		</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script src="js/jquery.min.js"></script>
<script>
	window.onload = function(){
		ajax_lists(1,10,'down');
	}
	var curPage = 1;
	var pageSize = 10;
	mui.init({
		pullRefresh : {
			container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			down : {
			  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			  color:'#00A4FF', //可选，默认“#2BD009” 下拉刷新控件颜色
			  height:'100px',//可选,默认50px.下拉刷新控件的高度,
			  range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			  offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			  callback :function(){ 
					curPage = 1;
					ajax_lists(curPage,pageSize,'down');
					mui('#refreshContainer').pullRefresh().endPulldown();
			  }
			},
			up : {
			  height:100,//可选.默认50.触发上拉加载拖动距离
			  contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			  contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			  callback :function(){
					curPage++;
					$(".start-pull-up").show();
					ajax_lists(curPage,pageSize,'up'); 
					$(".start-pull-up").show();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); 
			  }
			}
		}
	});
	function fmtDate(obj){
		var date =  new Date(obj);
		var y = 1900+date.getYear();
		var m = "0"+(date.getMonth()+1);
		var d = "0"+date.getDate();
		return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
	}
	//考勤列表
	function ajax_lists(curPage,pageSize,type){
		mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = {};
			data.api = 'work-man-group-pounchtime-info';
			data.token = token;
			data.projectID = params.projectID;
			data.justCount = 0;
			data.curPage = curPage;
			data.pageSize = pageSize;
			mui.ajax(project_cofnig.service_url, {
				async: true,
				dataType: 'json',
				data: data,
				success: function (ref) {
					if(ref.code == 0){
						if(ref.data.recCount == 0 ){
							$(".pounchtime_lists").html("<div class='nodata'><img src='images/nodata.png'></div>");
							return false;
						}
						var _html = '';
						mui.each(ref.data.pounchtimeInfos,function(i,v){
								var method_text = '';
								switch(v.method)
								{
									case '0':
									  method_text = '二维码进';
									  break;
									case '1':
									  method_text = '二维码出';
									  break;
									case '2':
										method_text = '刷卡进';
										break;
									case '3':
										method_text = '刷卡出门';
										break;
									case '4':
										method_text = 'wifi进门';
										break;
									case '5':
										method_text = '密码进门';
										break;
									default:
										 method_text = '打卡';
										 break;
								}
								var time = '';
								mui.ajax(project_cofnig.time_dec, {
									async: false,
									dataType: 'json',
									data: {time:v.punchtime},
									success: function (ref) {
										time = ref.time;
									}
								});
								_html += '<div class="col-xs-12 list_list">';
								_html += '<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_'+i+'">';
								_html += '<div class="col-xs-2 title left">'+v.name+'</div>';
								_html += '<div class="col-xs-2 title">'+v.sex+'</div>';
								_html += '<div class="col-xs-6 title">'+time+'</div>';
								_html += '<div class="col-xs-2 title right">'+method_text+'</div>';
								_html += '</button>';
								_html += '</div>';
								_html += '<div class="modal fade" id="myModal_'+i+'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
								_html += '<div class="modal-dialog">';
								_html += '<div class="modal-content">';
								_html += '<div class="modal-header">';
								_html += '<h4 class="modal-title" id="myModalLabel">'+v.name+'</h4>';
								_html += '</div>';
								_html += '<div class="col-xs-12 modal-body">';
								_html += '<div class="col-xs-12">';
								_html += '<div class="col-xs-9 modal_1_left">进出时间</div>';
								_html += '<div class="col-xs-3 modal_1_right">进出</div>';
								_html += '</div>';
								_html += '<div class="col-xs-12">';
								_html += '<div class="col-xs-9 modal_left">'+time+'</div>';
								_html += '<div class="col-xs-3 modal_right">'+((v.inout == '1') ? '出场':'进场')+'</div>';
								_html += '</div>';
								_html += '</div>';
								_html += '</div><!-- /.modal-content -->';
								_html += '<div class="col-xs-12 modal-footer">';
								_html += '<button type="button" class="btn btn-default" data-dismiss="modal">X</button>';
								_html += '</div>';
								_html += '</div><!-- /.modal -->';
								_html += '</div>';
						});
						if(type == 'down' && curPage == 1){
							$(".pounchtime_lists").html(_html);
						}else{
							$(".pounchtime_lists").append(_html);
						}
					}
				}
			});	
		});
	}
	mui(".title_top").on("tap",".back",function(){
		mui.back();
	}); 
</script>
